<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="css/video_Ghost.css"/>
		 <link
		    rel="stylesheet"
		    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
		  />
		<title></title>
	</head>
	<body>
		
		<nav class="navbar navbar-default navbar-inverse">
		  <div class="container">
		    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <a class="navbar-brand logo" href="snowForSteffi.html" class="logo"><img src="img/Steffi_sign1.png" class="img-responsive"></a>
		    </div>
		
		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		      <ul class="nav navbar-nav">
		        <li><a href="index.html">首页 <span class="sr-only">(current)</span></a></li>
		        <li><a href="PIC_Ghost.html">图片</a></li>
				<li class="active"><a href="video_Ghost.html">视频</a></li>
				<li><a href="#">新闻动态</a></li>
				<li><a href="#">开发者中心</a></li>
				<!-- <li><a href="#">开发者社区</a></li>
				<li><a href="#">开放平台</a></li> -->
				<li><a href="AboutUs.html">涂鸦墙</a></li>
		        <!-- <li class="dropdown">
		          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
		          <ul class="dropdown-menu">
		            <li><a href="#">Action</a></li>
		            <li><a href="#">Another action</a></li>
		            <li><a href="#">Something else here</a></li>
		            <li role="separator" class="divider"></li>
		            <li><a href="#">Separated link</a></li>
		            <li role="separator" class="divider"></li>
		            <li><a href="#">One more separated link</a></li>
		          </ul>
		        </li> -->
		      </ul>
		      
		      <ul class="nav navbar-nav navbar-right">
		        
		        <li class="dropdown">
		          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Language <span class="caret"></span></a>
		          <ul class="dropdown-menu">
		            <li><a href="#">中文</a></li>
		            <li><a href="#">English</a></li>
		
		          </ul>
		        </li>
		      </ul>
		    </div><!-- /.navbar-collapse -->
		  </div><!-- /.container-fluid -->
		</nav>
		
		
		<div class="video_box">
			<div class="container">
				<div class="row">
					<div class="col-sm-6 left">
						<!-- <div class="btn_box"> -->
						<div class="btn_box col-sm-12">
						<a href="">
							<button
							  data-text="Start"
							  class="btn btn-primary btn-ghost btn-border-stroke  btn-text-float-up"
							>
							  <div class="btn-borders">
							    <div class="border-top"></div>
							    <div class="border-right"></div>
							    <div class="border-bottom"></div>
							    <div class="border-left"></div>
							  </div>
							  <span class="btn-text">视频1</span>
							</button>
						</a>
						</div>
						<div class="btn_box col-sm-12">
						<a href="">
							<button
							  data-text="Start"
							  class="btn btn-primary btn-ghost btn-border-stroke  btn-text-float-up"
							>
							  <div class="btn-borders">
							    <div class="border-top"></div>
							    <div class="border-right"></div>
							    <div class="border-bottom"></div>
							    <div class="border-left"></div>
							  </div>
							  <span class="btn-text">视频2</span>
							</button>
						</a>
						</div>
						<div class="btn_box col-sm-12">
						<a href="">
							<button
							  data-text="Start"
							  class="btn btn-primary btn-ghost btn-border-stroke  btn-text-float-up"
							>
							  <div class="btn-borders">
							    <div class="border-top"></div>
							    <div class="border-right"></div>
							    <div class="border-bottom"></div>
							    <div class="border-left"></div>
							  </div>
							  <span class="btn-text">视频3</span>
							</button>
						</a>
						</div>
					</div>
					<div class="col-sm-6 ">
						<div class="Ghost_phone">
						<video width="233" height="385" controls="controls">
							<source src="video/ghostvideo.mp4" type="video/mp4"></source>
							<source src="myvideo.ogv" type="video/ogg"></source>
							<source src="myvideo.webm" type="video/webm"></source>
							<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
								<param name="movie" value="myvideo.swf" />
								<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
							</object>
							当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
						</video>
						</div>
					</div>
				</div>
		</div>
		</div>
		
		

		
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
		<script type="text/javascript" src="js/bootstrap.js">
					
		</script>
		<script type="text/javascript">
			let abbr = document.querySelector("abbr");
			abbr.textContent = "";
			let title = abbr.dataset.title;
			let words = title.split(" ");
			words.forEach(word => {
			  let [initial, ...restLetters] = word.split("");
			  let initialSpan = document.createElement("span");
			  initialSpan.textContent = initial;
			  initialSpan.className = "initial";
			  abbr.append(initialSpan);
			  restLetters.forEach(letter => {
			    let hiddenSpan = document.createElement("span");
			    hiddenSpan.textContent = letter;
			    hiddenSpan.className = "hidden";
			    abbr.append(hiddenSpan);
			  });
			});


			
			

		</script>
	</body>
</html>
